<script>
export default {
  // 组件的状态(数据)
  data () {
    return {
      message: '成熟的人有什么特点？是在理发的时候理发师不再对我说，你头发很厚需要打薄'
    }
  },
  methods: {

  },
  computed: {

  },
  components: {

  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">左边</el-aside>
      <el-container>
        <el-header>上边</el-header>
        <el-main>内容</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<!-- scoped 让该 style 中的样式只在当前组件中生效 -->
<style>
html,
body,
#app,
.common-layout,
.el-container {
  height: 100%;
}

.el-aside {
  background-color: #00c853;
}

.el-header {
  background-color: #02933e;
}

.el-main {
  background-color: #80d8ff;
}
</style>

